<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="12" md="8">
          <v-card height="100%" class="mx-auto">
            <v-container>
              <v-list-item class="py-7">
                <v-list-item-avatar
                  size="64"
                  style="cursor:pointer;"
                  @click="$router.push(`/creater/${article.name[0]}`)"
                >
                  <v-img class="elevation-6" :src="article.name[1]"></v-img>
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title class="headline pb-4 font-weight-bold">{{
                    article.title
                  }}</v-list-item-title>
                  <v-list-item-subtitle>{{
                    article.name[0]
                  }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-card-text>
                <div class="dialog-h5" v-html="article.content"></div>
              </v-card-text>
              <div>
                <v-btn
                  class="ma-2"
                  text
                  icon
                  color="blue lighten-2"
                  @click="like()"
                >
                  <v-icon>mdi-thumb-up</v-icon> </v-btn
                >{{ article.like }}

                <v-btn
                  class="ma-2"
                  text
                  icon
                  color="red lighten-2"
                  @click="share()"
                >
                  <v-icon>mdi-share</v-icon> </v-btn
                >文章链接
                <v-btn
                  class="ma-2"
                  text
                  icon
                  color="green lighten-2"
                  @click="wechat = !wechat"
                >
                  <v-icon>mdi-wechat</v-icon>
                </v-btn>
                微信
                <v-btn
                  class="ma-2"
                  text
                  icon
                  color="orange lighten-2"
                  @click="shareToQQ()"
                >
                  <v-icon>mdi-star</v-icon> </v-btn
                >QQ
              </div>
              <div v-show="wechat" style="text-align:center;">
                <canvas id="canvas"></canvas>
                <p class="pt-1">扫一扫打开微信</p>
              </div>
              <v-card-text>
                <div>
                  <span class="font-weight-bold subtitle-1"
                    >评论&nbsp;&nbsp;{{ commentList.length }}</span
                  >
                </div>
                <div>
                  <v-row>
                    <v-col cols="12" md="10">
                      <v-text-field
                        v-model="model.content"
                        label="你的评论..."
                        required
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2">
                      <v-btn @click="comment">发送</v-btn>
                    </v-col>
                  </v-row>
                </div>
                <div
                  v-for="comment in commentList"
                  :key="comment.pk"
                  class="py-3"
                >
                  <v-list-item class="py-0">
                    <v-list-item-avatar
                      size="24"
                      @click="
                        $router.push(`/creater/${comment.fields.name[0]}`)
                      "
                    >
                      <v-img
                        class="elevation-6"
                        :src="comment.fields.name[1]"
                      ></v-img>
                    </v-list-item-avatar>
                    <v-list-item-title class="subtitle-1 font-weight-bold"
                      >{{ comment.fields.name[0] }}
                    </v-list-item-title>
                    <v-list-item-subtitle class="text-right">
                      {{
                        new Date(comment.fields.date_created).getFullYear() +
                          "年" +
                          (new Date(comment.fields.date_created).getMonth() +
                            1) +
                          "月" +
                          new Date(comment.fields.date_created).getDate() +
                          "日"
                      }}
                    </v-list-item-subtitle>
                  </v-list-item>
                  <div class="pl-12">
                    <span class="pl-2">
                      {{ comment.fields.content }}
                    </span>
                  </div>
                </div>
              </v-card-text>
            </v-container>
          </v-card>
        </v-col>
        <v-col cols="12" md="4">
          <v-card height="110" class="mx-auto">
            <v-list-item class="py-7">
              <v-list-item-avatar size="48">
                <v-img class="elevation-6" :src="article.name[1]"></v-img>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title class="title  font-weight-bold">{{
                  article.name[0]
                }}</v-list-item-title>
              </v-list-item-content>
              <v-btn
                color="info"
                @click="$router.push(`/creater/${article.name[0]}`)"
                >查看主页</v-btn
              >
            </v-list-item>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  props: {
    id: {},
  },
  data() {
    return {
      article: {
        name: [],
        content: {},
      },
      codes: "",
      wechat: false,
      commentList: [],
      model: {},
      likes: {},
    };
  },
  created() {
    this.id && this.fetchArticle() && this.fetchComment();
  },
  methods: {
    async fetchArticle() {
      try {
        const res = await this.$http.get(`article/?id=${this.id}`);
        this.article = res.data.list[0].fields;
        this.article.cover_image = require(this.article.cover_image);
        console.log(this.article);
      } catch (e) {
        console.log("图片获取失败");
      }
      this.useqrcode();
    },
    async fetchComment() {
      try {
        const res = await this.$http.get(`comment_by_id/?id=${this.id}`);
        this.commentList = res.data.list;
        this.commentList.forEach((comment) => {
          comment.fields.name[1] = require(comment.fields.name[1]);
        });
        console.log(this.commentList);
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    share() {
      console.log("分享");
      console.log(this.$router);
      this.$copyText(`https://mjuruankai.com/#/article/${this.id}`)
        .then(() => {
          this.$toast({
            text: "已复制网址至剪贴板",
            type: "success",
            duration: 3000,
          });
        })
        .catch(() => {
          alert("Can not copy");
        });
    },
    shareToQQ(){
      let href = `https://mjuruankai.com/#/article/${this.id}`
      let url = `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(href)}&source=https://mjuruankai.com&title=${this.article.title}&summary=${this.article.content.slice(0, 42)}&desc=${this.article.title}&pics=https://mjuruankai.com${this.article.cover_image}`
      window.open(url)
    },
    async like() {
      console.log("点赞");
      if (localStorage.getItem("name") === null) {
        console.log("111");
        this.$toast({
          text: "请先登录",
          type: "warning",
          duration: 3000,
        });
      } else {
        this.article.like++;
        this.likes.id = this.id;
        this.likes.like = this.article.like;
        const res = await this.$http.post("like_article/", this.likes);
        console.log(res.data);
        this.$toast({
          text: "点赞成功",
          type: "success",
          duration: 3000,
        });
      }
    },
    async comment() {
      this.model.article_id = this.id;
      this.model.name = localStorage.getItem("name");
      if (this.model.name === null) {
        console.log("111");
        this.$toast({
          text: "请先登录",
          type: "warning",
          duration: 3000,
        });
      } else if (this.model.content === undefined) {
        this.$toast({
          text: "字符不能为空",
          type: "warning",
          duration: 3000,
        });
      } else {
        const res = await this.$http.post("comment/", this.model);
        if (res.data.error_num === 0) {
          this.$toast({
            text: "评论成功",
            type: "success",
            duration: 3000,
          });
          this.model.content = "";
          this.fetchComment();
        }
      }
    },
    useqrcode() {
      let canvas = document.getElementById("canvas");
      QRCode.toCanvas(
        canvas,
        `https://mjuruankai.com/#/article/${this.id}`,
        { toSJISFunc: QRCode.toSJIS },
        function(error) {
          if (error) console.error(error);
          console.log("success!");
        }
      );
    },
  },
};
</script>

<style scoped>
.dialog-h5 >>> img,
p,
span {
  width: 100%;
  padding-top: 20px;
}
.dialog-h5 >>> pre{
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.dialog-h5 >>> iframe{
  width: 100%;
}
@media screen and (min-width: 415px){
  .dialog-h5 >>> iframe{
  width: 100%;
  height: 360px;
}
}

</style>
